<template>
	<view style=" background-color: #fff;" :style="{paddingTop: topPadding}"></view>

	<view class="swiper-page" :style="{ height : swiperItemHeight }">
    <view class="searchBox">
<!--      <view class="input-view" @click="$goURl(`/pages/index/search`)">-->
<!--        <view class="input-view-left">-->
<!--          <uni-icons type="search" size="22" color="#00C356"/>-->
<!--        </view>-->
<!--        <view class="input-view-box">-->
<!--          <text>搜索商品</text>-->
<!--        </view>-->
<!--        <view class="input-view-right">-->
<!--          搜索-->
<!--        </view>-->
<!--      </view>-->
<!--			<view class="share" @click="$goURl('/subPackages/personal/share')">-->
<!--				<uni-icons type="pyq" size="22" color="#fff" />分享-->
<!--			</view>-->
		</view>

		<view class="bg_img_view" v-if="!showSwiper">
			<image class="bg_img" v-for="(item,index) in list" :key="index" :src="item.url"
				:style="{ zIndex : index === current ? '9' : '1' ,height : swiperItemHeight }" :class="{ 'fadein' : index === current }" />
		</view>
    <view class="swiper_cnt" :style="{ height : swiperItemHeight ,width : '100vw'}">
		<swiper v-if="showSwiper" class="swiper" id="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="800"
			indicator-active-color="#5ca9b7" circular @change="onChange" @animationfinish="onAnimationfinish"
            @transition="onTransition">
			<swiper-item v-for="(item,index) in props.list" :key="index" >
				<view class="swiper-item" :style="{ height : swiperItemHeight }" >
					<image class="image" :style="{ top : `${top}px`, left: `${left}px` }" :src="item.url||item.img" mode="">
					</image>
				</view>
			</swiper-item>
		</swiper>
    </view>
	</view>

</template>

<script setup>
	import {
		computed,
		getCurrentInstance,
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		onShow,
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		useThrottle
	} from '@/components/home/bg-swiper/index.js';
	const {
		proxy
	} = getCurrentInstance()

	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
    topPadding: {
		type: String,
		default: '80rpx'
	},
    swiperItemHeight:{
      type: String,
      default: '244rpx'
    },
    showSwiper:{
      type: Boolean,
      default: false
    }
	})
	const op = ref(0)
	const ob = ref(255)
	const statusBarHeight = ref(44)
	const top = ref(0)
	const left = ref(0)
	const width = ref(0)
	const query = uni.createSelectorQuery().in(proxy);
	onShow(() => {
		console.log('show', props.list)
	})
	onMounted(() => {
		// query.select('#swiper').boundingClientRect(data => {
		// 	// console.log("得到布局位置信息" + JSON.stringify(data));
		// 	// console.log("节点离页面顶部的距离为" + data.top);
		// 	top.value = data.top * -1 + 40
		// 	left.value = data.left * -1
		// 	width.value = data.width
		// }).exec()
	})

	onPageScroll((res) => {
		// statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		// res.scrollTop 为页面滚动距离
		let top = res.scrollTop
		// height为状态栏高度+自定义导航栏标题内容高度（这里是44px）
		let height = statusBarHeight.value + 44
		// 判断滚动高度
		// 如果小于顶部自定义导航的高度
		if (top <= height) {
			// 透明度(op) = 滚动距离/导航栏高度
			//  (不做操作 直接计算 op.value = top/height 也可以实现)
			// 由于(滚动距离/导航栏高度)得到0-1之间小数点后n位小数
			// 四舍五入后得到的只能是0/1
			// 因此做如下操作
			op.value = Math.round(top / height * 100) / 100
			ob.value = Math.round((1 - op.value) * 255)


		} else {
			// 如果滚动距离大于导航高度，则透明度值为1（不透明）
			op.value = 1
			ob.value = 0
		}
	})

	const current = ref(0)
	const bgImg = computed(() => {
		return props.list[current.value].src
	})
	const onAnimationfinish = (e) => {
		current.value = e.detail.current
		isRightScorll.value = false
		isLeftScorll.value = false
	}
	const onChange = () => {
		// console.log('变换了')
	}
	const isRightScorll = ref(false)
	const isLeftScorll = ref(false)
	const isShow = ref(true)
	const onTransition = useThrottle((e) => {
		if (e.detail.dx >= width.value * 0.5 && !isRightScorll.value) {
			startAni()
			if (current.value === props.list.length - 1) {
				current.value = 0
			} else {
				current.value++
			}
			isRightScorll.value = true
			isLeftScorll.value = false
		}
		if (e.detail.dx < width.value * 0.5 && isRightScorll.value) {
			startAni()
			if (current.value === 0) {
				current.value = props.list.length - 1
			} else {
				current.value--
			}
			isRightScorll.value = false
			isLeftScorll.value = false
		}
		if (e.detail.dx <= width.value * -0.5 && !isLeftScorll.value) {
			startAni()
			if (current.value === 0) {
				current.value = props.list.length - 1
			} else {
				current.value--
			}
			isLeftScorll.value = true
			isRightScorll.value = false
		}
		if (e.detail.dx > width.value * -0.5 && isLeftScorll.value) {
			startAni()
			if (current.value === props.list.length - 1) {
				current.value = 0
			} else {
				current.value++
			}
			isLeftScorll.value = false
			isRightScorll.value = false
		}
	}, 200)

	const opacity = ref(1)
	const startAni = () => {
		opacity.value = 0.3
		setTimeout(() => {
			opacity.value = 1
		}, 80)
	}
	const styles = {
		'width': '100vw',
		'height': '500rpx',
		'position': 'absolute',
		'inset': 0,
		'z-index': 1,
	}

	const dotsStyles = reactive({
		height: 2,
		backgroundColor: 'rgba(92, 169, 183, .3)',
		border: '1px rgba(92, 169, 183, .3) solid',
		color: '#fff',
		selectedBackgroundColor: 'rgba(92, 169, 183, .9)',
		selectedBorder: '1px rgba(92, 169, 183, .9) solid'
	})
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}


	.topNav {
		width: 100vw;
		height: 160rpx;
		background-color: transparent;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: flex;
		justify-content: start;
		align-items: center;
		padding: 0 40rpx;
		// box-shadow: 0 0 2rpx rgba(0, 0, 0, .1);
		padding-top: 40px;

		.logo {
			width: 60rpx;
			height: 60rpx;
			border-radius: 15px;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			box-shadow: 0 0 2rpx rgba(0, 0, 0, .1);
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			font-size: 18px;
			font-weight: 600;
			color: #fff;
			margin-right: 20rpx;
		}

	}

	.swiper-page {
		width: 100vw;
		height: 540rpx;
		display: flex;
		justify-content: center;
		background-size: cover;
		position: relative;
		border-radius: 0 0 20px 20px;

		.searchBox {
			width: 95%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			margin-top: 100rpx;
			padding: 0 10upx;
			z-index: 99;
			position: fixed;

			.input-view {
				width: 80%;
				display: flex;
				flex-direction: row;
				background-color: #f5f5f5;
				justify-content: space-between;
				height: 60upx;
				border-radius: 30px;
				flex-wrap: nowrap;
				overflow: hidden;
				align-items: center;

				.input-view-left {
					text-align: center;
					margin-left: 15upx;
					margin-top: 5upx;
				}

				.input-view-box {
					display: flex;
					width: 200upx;
					margin: 0 156upx 0 10upx;

					text {
						font-size: 12px;
						color: #9f9f9f;
					}

				}

				.input-view-right {
					background-color: $color2;
					border-radius: 30px;
					padding: 8upx 20upx;
					color: #fff;
					margin-left: 15upx;
					font-size: 12px;
					margin-right: 5upx;
				}
			}

			.share {
				display: flex;
				color: #fff;
			}
		}

		.bg_img {
			width: 100vw;
			height: 540rpx;
			position: absolute;
			inset: 0;
			z-index: 1;
			opacity: 0;
			// opacity: v-bind('opacity');
			// transition: opacity 0.1s;
			-webkit-transition: all 0.2s;
			-moz-transition: all 0.2s;
			-ms-transition: all 0.2s;
			-o-transition: all 0.2s;
			transition: all 0.5s;
			//border-radius: 0 0 10px 10px;
		}

		.fadein {
			opacity: 1 !important;
		}

		.swiper ,swiper_cnt{
			//margin-top: 96px;
      height: 100%;
			width:100%;
			//border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			z-index: 18;

			.swiper-item {
				width: 100%;
				height: 100%;
				overflow: hidden;
				//border-radius: 20rpx;
				position: relative;
				z-index: 4;

				.image {
          width: 100%;
          height: 100%;
					position: absolute;
					z-index: 3;
					//border-radius: 20rpx;
				}
			}
		}
	}
</style>
